import React, { Component } from 'react'

/**
 Map对象就是把js中的对象转为 immutable对象，只转换第1层
 List把js数组转为immutable对象 只转换第1层
 fromJS 深层转换
 */
import { Map, is, List, fromJS } from 'immutable'

/* // 对象
const state = {
  id: 1,
  name: '张三'
}

// 把js对象转为 immutable对象
const imState = Map(state)
const imState2 = Map(state)

// js中的条件判断不对对于immutable内部结构是否一致判断
console.log(imState2 === imState)
// immutable对象比较
console.log(imState.equals(imState2))
// 方法，比较方法中两个参数数据是否一致
console.log(is(imState,imState2))

// 获取js对象中的数据
console.log(state.id);
// immtable中Map数据的获取 get/getIn
console.log(imState.get('id'));
console.log(imState.getIn(['id']));

// Map转为js对象
console.log(imState.toJS());
 */

/* 
// js中的数组
const state = [1, 2, 3]

// 把js中的数组转为immutable对象
const imState = List(state)

// console.log(imState);
// 获取下标为1的数据  immutable
// console.log(imState.get(1))

// 合并
let imState2 = imState.concat([4,5,6])
// 追加
imState2 = imState2.push(7)

// 循环
for(let item of imState2){
  console.log(item)
}
// imState2.map(item=>console.log(item))

// 把immutable中的List转为js数组
console.log(imState2.toArray()); */


// 深层转换 js => immutable
const imState = fromJS({
  id: 1,
  name: '张三',
  arr: [1, 2, 3],
  obj: { age: 29 }
})

// console.log(imState)

console.log(imState.get('name'));
// 数组
console.log(imState.get('arr').get(0));
console.log(imState.getIn(['arr', 0]));
// 对象
console.log(imState.get('obj').get('age'));
console.log(imState.getIn(['obj', 'age']));

// 修改 set/setIn/update/updateIn
// const newImState = imState.set('name','李四')
// const newImState2 = imState.setIn(['name'],'王五')
// const newImState3 = imState.setIn(['arr',0],10)
// const newImState4 = imState.setIn(['obj','age'],10)

// 把immutable转为js对象
// console.log(newImState.toJS());
// console.log(newImState2.toJS());
// console.log(newImState3.toJS());
// console.log(newImState4.toJS());

// 自增  并发问题
// console.log(imState.updateIn(['arr', 1], value => value + 1).toJS());
// console.log(imState.update('id', value => value + 1).toJS());

// 删除
console.log(imState.remove('id').toJS());
console.log(imState.removeIn(['arr',1]).toJS());























class App extends Component {
  render() {
    return (
      <>
        你好世界
      </>
    )
  }

}

export default App
